<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>晨测</title>
</head>
<body>
    <p>阳光明媚</p>
    <input type="text" name="content"/>
    <button id="btn">点我干活</button>
</body>
<script>
    // 用户操作的起点：点击按钮
    // 对应代码的实现：给按钮绑定单击响应函数
    // 为了实现给按钮绑定单击响应函数，需要先获取到按钮对象
    let btnEle = document.getElementById("btn");

    // 得到按钮对应的元素对象之后，绑定单击响应函数
    btnEle.onclick = function () {
        // 检测点：看看绑定单击响应函数这一步操作是否成功
        // alert("aaaa");

        // 下一步的操作：把文本框中用户输入的内容写入 p 标签
        // 获取文本框对应的元素对象
        let inputArr = document.getElementsByName("content");
        let inputEle = inputArr[0];

        // 通过文本框元素对象获取用户输入的值
        let content = inputEle.value;

        // 检测点：打印出 content 看看是否是用户输入的数据
        // console.log(content);

        // 把 content 写入 p 标签
        // 获取 p 标签对应的元素对象
        let pEle = document.getElementsByTagName("p")[0];

        // 执行写入
        pEle.innerText = content;
    };
</script>
</html>